<template>
	<view class="fun-flex-col page">
		<view class="fun-flex-col group">
			<view class="fun-flex-col group_5">
				<view class="fun-self-start group_6"></view>
				<view class="fun-flex-row fun-justify-center fun-self-stretch group_7">
					<text class="font_2 text_4">$</text>
					<text class="font_2 text_5 ml-7">321,692.4</text>
				</view>
				<text class="fun-self-center font text_6">Amount ($)</text>
				<view class="fun-flex-row equal-division">
					<view class="fun-flex-col fun-items-center group_8 equal-division-item">
						<text class="font_3">+1473.8</text>
						<text class="fun-mt-14 font text_7">Yesterday’s Return</text>
					</view>
					<view class="fun-flex-col fun-items-center group_8 equal-division-item">
						<text class="font_3">21692.4</text>
						<text class="fun-mt-14 font text_7">Cumulative Returns</text>
					</view>
					<view class="fun-flex-col fun-items-center group_8 equal-division-item">
						<text class="font_3">+7.23%</text>
						<text class="fun-mt-14 font text_7">Holding Yield</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fun-flex-col fun-relative group_9">
			<view class="divider view"></view>
			<view class="divider"></view>
			<view class="divider"></view>
			<view class="divider"></view>
			<view class="divider"></view>
			<view class="group_10 pos_2"></view>
			<view class="fun-flex-col fun-justify-start section pos">
				<view class="fun-flex-col fun-justify-start fun-items-start section_2">
					<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper">
						<text class="text_8">$140.00</text>
					</view>
				</view>
			</view>
		</view>
		<view class="fun-flex-col">
			<view class="fun-flex-col group_11">
				<view class="fun-flex-row fun-justify-between">
					<text class="font text_9">2023.12.11</text>
					<text class="font text_10">2024.06.23</text>
				</view>
				<view class="fun-flex-row fun-justify-between fun-items-center group_12">
					<text class="font_4 text_11">Earnings Arrival Date</text>
					<text class="font_4 text_12">Daily Income</text>
					<text class="font_5 text_13">Portfolio Details</text>
				</view>
				<view class="fun-flex-row fun-justify-center fun-relative group_13" @click="seeMore">
					<text class="font_6 text_14 pos_3">2024.06.24</text>
					<text class="font_5 text_15">$600.00</text>
					<text class="font_7 text_16 pos_4">See More</text>
				</view>
				<view class="fun-flex-row fun-justify-center fun-relative group_14" @click="seeMore">
					<text class="font_6 text_17 pos_5">2024.06.24</text>
					<text class="font_5 text_18">$600.00</text>
					<text class="font_7 text_19 pos_6">See More</text>
				</view>
			</view>
			<view class="fun-mt-8 fun-flex-row fun-justify-between section_3">
				<view class="fun-flex-col fun-justify-start fun-items-center image-wrapper">
					<image class="image_4" src="../../static/288ffc970c61e18ea9a058d129df98df.png" />
				</view>
				<view class="fun-flex-col fun-justify-start fun-items-center text-wrapper_2">
					<text class="font_8 text_20" @click="redeem">Redeem</text>
				</view>
				<view class="fun-flex-col fun-justify-start fun-items-end text-wrapper_3">
					<text class="font_8 text_21" @click="addPurchase">Additional Purchase</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		props: {},
		data() {
			return {
				title: "",
			};
		},
		onLoad(potion) {
			this.title = potion.title
		},

		onReady() {
			uni.setNavigationBarTitle({
				title: this.title
			});
		},

		methods: {
			addPurchase(){
				uni.navigateTo({url:`/pages/myPositions/addPurchase`})
			},
			redeem(){
				uni.navigateTo({url:`/pages/myPositions/addPurchase`})
			},
			seeMore(){
				uni.navigateTo({url:`/pages/myPositions/seeMore?title=${this.title}`})
			}
		},
	};
</script>

<style scoped lang="scss">
	.ml-5 {
		margin-left: 10rpx;
	}

	.ml-7 {
		margin-left: 14rpx;
	}

	.page {
		background-color: #00033b;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100%;

		.group {
			.group_2 {
				padding-left: 68rpx;
				padding-right: 28rpx;

				.text {
					color: #ffffff;
					font-size: 30rpx;
					font-family: SF Pro Text;
					font-weight: 600;
					line-height: 22.18rpx;
				}

				.image {
					width: 34rpx;
					height: 22rpx;
				}

				.image_2 {
					width: 30rpx;
					height: 22rpx;
				}

				.image_3 {
					width: 48rpx;
					height: 22.66rpx;
				}
			}

			.group_3 {
				margin-top: 48rpx;
				padding: 0 32rpx;

				.group_4 {
					width: 435.56rpx;

					.text_2 {
						color: #ffffff;
						font-size: 32rpx;
						font-family: SF Pro Display;
						font-weight: 300;
						line-height: 28.78rpx;
					}

					.text_3 {
						margin-left: 48rpx;
						line-height: 14.54rpx;
					}
				}
			}

			.group_5 {
				margin-top: 88rpx;

				.group_6 {
					margin-left: 46rpx;
					filter: blur(3.5rpx);
					width: 214rpx;
					height: 8rpx;
				}

				.group_7 {
					margin-top: 12rpx;

					.font_2 {
						font-size: 66.66rpx;
						font-family: SF Pro Display;
						font-weight: 700;
						color: #ffffff;
					}

					.text_4 {
						margin-bottom: 4rpx;
						line-height: 56.32rpx;
					}

					.text_5 {
						line-height: 58.3rpx;
					}
				}

				.text_6 {
					margin-top: 32rpx;
					font-size: 22rpx;
					line-height: 20.34rpx;
				}

				.equal-division {
					align-self: stretch;
					margin-top: 48rpx;

					.group_8 {
						flex: 1 1 250rpx;

						.font_3 {
							font-size: 32rpx;
							font-family: SF Pro Display;
							line-height: 23.3rpx;
							color: #5ceec4;
						}

						.text_7 {
							font-size: 22rpx;
						}
					}

					.equal-division-item {
						padding: 12rpx 0;
					}
				}
			}
		}

		.group_9 {
			padding: 98rpx 0 80rpx;
			overflow-x: hidden;
			border-bottom: dotted 2rpx #ffffff;

			.divider {
				margin-top: 78rpx;
				opacity: 0.2;
				height: 2rpx;
				border-left: dotted 2rpx #ffffff;
				border-right: dotted 2rpx #ffffff;
				border-top: dotted 2rpx #ffffff;
				border-bottom: dotted 2rpx #ffffff;
			}

			.view {
				margin-top: 0;
			}

			.group_10 {
				opacity: 0.2;
				height: 166rpx;
				border-left: dotted 2rpx #ffffff;
				border-right: dotted 2rpx #ffffff;
				border-top: dotted 2rpx #ffffff;
				border-bottom: dotted 2rpx #ffffff;
			}

			.pos_2 {
				position: absolute;
				left: 238rpx;
				right: 510rpx;
				top: 262rpx;
			}

			.section {
				padding-bottom: 100rpx;
				background-image: url('../../static/059423b5821f674c9f007a559234564a.png');
				background-size: 100% 100%;
				background-repeat: no-repeat;

				.section_2 {
					padding: 94rpx 0 260rpx;
					background-image: url('../../static/84d4d69f975488d74ae8ac1eefd0c14f.png');
					background-size: 100% 100%;
					background-repeat: no-repeat;

					.text-wrapper {
						margin-left: 190rpx;
						padding: 16rpx 0 20rpx;
						background-image: url('../../static/13da3de81c7d1d3ebcae43f5d3c44031.png');
						background-size: 100% 100%;
						background-repeat: no-repeat;
						width: 120rpx;

						.text_8 {
							color: #000000;
							font-size: 24rpx;
							font-family: SF Pro Display;
							line-height: 20.3rpx;
						}
					}
				}
			}

			.pos {
				position: absolute;
				left: 0;
				right: -6rpx;
				top: 0;
			}
		}

		.group_11 {
			padding: 32rpx 24rpx 0 32rpx;

			.text_9 {
				line-height: 14.54rpx;
			}

			.text_10 {
				line-height: 14.54rpx;
			}

			.group_12 {
				margin-top: 40rpx;

				.font_4 {
					font-size: 20rpx;
					font-family: SF Pro Display;
					color: #b0b0bf;
				}

				.text_11 {
					line-height: 18.22rpx;
				}

				.text_12 {
					line-height: 18.18rpx;
				}

				.text_13 {
					color: #b0b0bf;
					line-height: 14.56rpx;
				}
			}

			.group_13 {
				margin-top: 24rpx;
				padding: 32rpx 0 24rpx;
				border-top: solid 2rpx #b0b1bf24;
				border-bottom: solid 2rpx #b0b1bf24;

				.text_14 {
					line-height: 14.64rpx;
				}

				.pos_3 {
					position: absolute;
					left: 1.86rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_15 {
					line-height: 16.92rpx;
				}

				.text_16 {
					line-height: 14.5rpx;
				}

				.pos_4 {
					position: absolute;
					right: 3.24rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.font_5 {
				font-size: 20rpx;
				font-family: SF Pro Display;
				line-height: 16rpx;
				color: #e85353;
			}

			.group_14 {
				padding: 28rpx 0;
				border-bottom: solid 2rpx #b0b1bf24;

				.text_17 {
					line-height: 14.64rpx;
				}

				.pos_5 {
					position: absolute;
					left: 1.86rpx;
					top: 50%;
					transform: translateY(-50%);
				}

				.text_18 {
					line-height: 16.92rpx;
				}

				.text_19 {
					line-height: 14.5rpx;
				}

				.pos_6 {
					position: absolute;
					right: 3.24rpx;
					top: 50%;
					transform: translateY(-50%);
				}
			}

			.font_6 {
				font-size: 20rpx;
				font-family: SF Pro Display;
				line-height: 16rpx;
				color: #ffffff;
			}

			.font_7 {
				font-size: 20rpx;
				font-family: SF Pro Display;
				line-height: 16rpx;
				font-weight: 100;
				color: #5ceec4;
			}
		}

		.font {
			font-size: 20rpx;
			font-family: SF Pro Display;
			line-height: 16rpx;
			font-weight: 300;
			color: #ffffff;
		}

		.section_3 {
			padding: 32rpx;
			background-color: #1b1d53;

			.image-wrapper {
				padding: 26rpx 0;
				background-color: #ffffff;
				border-radius: 50rpx;
				width: 100rpx;
				height: 100rpx;
			}

			.text-wrapper_2 {
				padding: 32rpx 20rpx;
				background-color: #ffffff;
				border-radius: 50rpx;
				width: 260rpx;
			}

			.text-wrapper_3 {
				padding: 32rpx 20rpx;
				background-color: #5ceec4;
				border-radius: 50rpx;
			}

			.font_8 {
				font-size: 24rpx;
				font-family: SF Pro Display;
				font-weight: 700;
				color: #333333;
			}
		}

		.image_4 {
			width: 48rpx;
			height: 48rpx;
		}
	}
</style>